<template>
    <div>
        <label>
            <input type="number" v-model="currentFrom"/>
        </label>
        <label>
            <input type="number" v-model="currentTo"/>
        </label>
    </div>
</template>

<script>
    export default {
        name: "FromTo",
        props: {
            fromTo: {
                type: Array,
                default: function () {
                    return [0, 0]
                }
            }
        },
        computed: {
            currentFrom: {
                get() {
                    return this.fromTo[0];
                },
                set(val) {
                    if (typeof val !== "number") {
                        val = parseFloat(val);
                    }
                    this.$emit('update:fromTo', [val, this.currentTo]);
                }
            },
            currentTo: {
                get() {
                    return this.fromTo[1];
                },
                set(val) {
                    if (typeof val !== "number") {
                        val = parseFloat(val);
                    }
                    this.$emit('update:fromTo', [this.currentFrom, val]);
                }
            }
        }
    }
</script>

<style scoped>

</style>
